<template>
  <el-dialog title="住宿调整"
             :close-on-click-modal="false"
             :visible.sync="dialogShow"
             width="740px"
             :before-close="handleClose">
    <el-form :model="dialogForm"
             ref="dialogForm"
             :rules="rules"
             label-width="100px">
      <el-form-item label="学生信息：">
        <div>{{dialogForm.name}}（{{dialogForm.sn}}）{{dialogForm.gender}} {{dialogForm.objectOrientedName}}</div>
        <div>{{dialogForm.collegeName}}>{{dialogForm.majorName}}>{{dialogForm.gradeName}}>{{dialogForm.className}} </div>
      </el-form-item>
      <el-form-item label="入住信息：">
        <div>{{dialogForm.checkInInfo || '--'}}</div>
      </el-form-item>
      <el-form-item label="调整类型："
                    prop="adjustType">
        <el-radio-group v-model="dialogForm.adjustType">
          <el-radio :label="1"
                    :disabled="Boolean(dialogForm.checkInInfo)">入住</el-radio>
          <el-radio :label="2"
                    :disabled="!dialogForm.checkInInfo">调宿</el-radio>
          <el-radio :label="0"
                    :disabled="!dialogForm.checkInInfo">退宿</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="调整寝室："
                    v-if="dialogForm.adjustType"
                    prop="bedId">
        <el-select v-model="dialogForm.schoolAreaId"
                   style="width: 150px;"
                   placeholder="--校区--"
                   @change="cascade('campus')"
                   size="small">
          <el-option v-for="(item, index) in campus"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.campusId"
                   style="width: 150px;"
                   placeholder="--园区--"
                   @change="cascade('gardens')"
                   size="small">
          <el-option v-for="(item, index) in gardens"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.buildingId"
                   style="width: 150px;"
                   placeholder="--楼栋--"
                   @change="cascade('buildings')"
                   size="small">
          <el-option v-for="(item, index) in buildings"
                     :key="index"
                     :label="item.number + '-' + item.unitNumber"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.roomId"
                   style="width: 150px;"
                   placeholder="--房间--"
                   @change="cascade('rooms')"
                   size="small">
          <el-option v-for="(item, index) in rooms"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.bedId"
                   style="width: 150px;"
                   placeholder="--床位--"
                   size="small">
          <el-option v-for="(item, index) in beds"
                     :key="index"
                     :label="item.bedNumber"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleClose"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="sure"
                 size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  listSchoolAreaByUserUsingGET,
  listCampusBySchoolAreaIdAndUserUsingGET,
  listBuildingByCampusIdAndUserUsingGET,
  listRoomByBuildingIdAndUserUsingGET,
  listCanUseBedByRoomIdUsingGET,
  adjustDormitoryUsingPOST
} from '@api/auto'
export default {
  props: {
    dialogShow: Boolean,
    query: Function,
    dialogForm: Object,
    bedId: Number
  },
  data () {
    const checkBedId = (rule, value, callback) => {
      if (!this.dialogForm.bedId) {
        return callback(new Error('请选择调整宿舍'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      campus: [],
      gardens: [],
      buildings: [],
      rooms: [],
      beds: [],
      cascade (type) {
        const actions = new Map([
          ['campus', 'changeCampus'],
          ['gardens', 'changeGardens'],
          ['buildings', 'changeBuildings'],
          ['rooms', 'changeRooms']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 校区change
      changeCampus () {
        this.dialogForm.campusId = ''
        this.dialogForm.buildingId = ''
        this.dialogForm.roomId = ''
        this.dialogForm.bedId = ''
        this.gardens = []
        this.buildings = []
        this.rooms = []
        this.beds = []
        this.listCampusBySchoolAreaIdAndUserUsingGET(this.dialogForm.schoolAreaId)
      },
      // 园区change
      changeGardens () {
        this.dialogForm.buildingId = ''
        this.dialogForm.roomId = ''
        this.dialogForm.bedId = ''
        this.buildings = []
        this.rooms = []
        this.beds = []
        this.listBuildingByCampusIdAndUserUsingGET(this.dialogForm.campusId)
      },
      // 楼栋change
      changeBuildings () {
        this.dialogForm.roomId = ''
        this.dialogForm.bedId = ''
        this.rooms = []
        this.beds = []
        this.listRoomByBuildingIdAndUserUsingGET(this.dialogForm.buildingId)
      },
      // 房间change
      changeRooms () {
        this.dialogForm.bedId = ''
        this.beds = []
        this.listCanUseBedByRoomIdUsingGET(this.dialogForm.roomId)
      },
      rules: {
        adjustType: [
          { required: true, type: 'number', message: '请选择入住类型' }
        ],
        bedId: [
          { required: true, validator: checkBedId, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.listSchoolAreaByUserUsingGET()
  },
  methods: {
    // 获取校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.campus = res.data
        // this.dialogForm.schoolAreaId = res.data.length ? res.data[0].id : null
      })
    },
    // 获取园区
    listCampusBySchoolAreaIdAndUserUsingGET (id) {
      listCampusBySchoolAreaIdAndUserUsingGET(id).then(res => {
        this.gardens = res.data
        // this.dialogForm.campusId = res.data.length ? res.data[0].id : null
      })
    },
    // 获取楼栋
    listBuildingByCampusIdAndUserUsingGET (id) {
      listBuildingByCampusIdAndUserUsingGET(id).then(res => {
        this.buildings = res.data.filter(item => {
          console.log(this.$sexTrans(this.dialogForm.gender), 'this.dialogForm.gender')
          return item.gender === this.$sexTrans(this.dialogForm.gender) || item.gender === 0
        })
        // this.dialogForm.buildingId = res.data.length ? res.data[0].id : null
      })
    },
    // 获取房间
    listRoomByBuildingIdAndUserUsingGET (id) {
      listRoomByBuildingIdAndUserUsingGET(id).then(res => {
        this.rooms = res.data
        // this.dialogForm.buildingId = res.data.length ? res.data[0].id : null
      })
    },
    // 获取床位
    listCanUseBedByRoomIdUsingGET (id) {
      listCanUseBedByRoomIdUsingGET(id).then(res => {
        this.beds = res.data
        // this.dialogForm.buildingId = res.data.length ? res.data[0].id : null
      })
    },
    sure () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.loading = true
          let body = {
            adjustType: this.dialogForm.adjustType,
            beforPlace: this.dialogForm.checkInInfo,
            bedId: this.dialogForm.adjustType === 0 ? this.bedId : this.dialogForm.bedId,
            sn: this.dialogForm.sn
          }

          adjustDormitoryUsingPOST(body).then(res => {
            this.handleClose()
            this.query()
            this.$message.success('操作成功')
            this.loading = false
          }).catch(res => {
            this.loading = false
          })
        }
      })
    },
    handleClose () {
      this.$refs.dialogForm.resetFields()
      this.$emit('handleClose')
    }
  }
}
</script>
